<template>
    <div 
      class="transport-button"
      :class="{ hidden: !visible }"
      @click="handleClick"
    >
      <span>选择交通方式</span>
    </div>
  </template>
  
  <script setup>
  defineProps({
    fromSpot: {
      type: Object,
      required: true
    },
    toSpot: {
      type: Object,
      required: true
    },
    visible: {
      type: Boolean,
      default: true
    }
  })
  
  const handleClick = () => {
    // TODO: 实现点击交通方式按钮的逻辑
  }
  </script>
  
  <style scoped>
  .transport-button {
    width: 100%;
    height: 32px;
    background: #f5f5f5;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 8px 0;
    transition: opacity 0.3s;
  }
  
  .transport-button.hidden {
    opacity: 0;
    pointer-events: none;
  }
  
  .transport-button:hover {
    background: #e8e8e8;
  }
  </style>